<template>
  <div>
    <Header :type="'screening'" @tag="getList" @reset="reset">
      <div class="head-tit">
        内容筛选
      </div>
      <div class="head-operation">
        <span class="head-label">
          名称搜索：
        </span>
        <el-input
          v-model="searchName"
          placeholder="请输入"
          size="small"
          class="head-select-input"
        >
          <el-select
            slot="prepend"
            v-model="select"
            style=" width: 126px;"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-input>
      </div>
    </Header>
    <Main :data="listData" :footer-lock="totals > 10">
      <el-table-column
        label="员工名称"
        align="center"
        property="nick_name"
      ></el-table-column>
      <el-table-column label="员工头像" align="center">
        <template slot-scope="scope">
          <img
            :src="$store.state.qiniu + scope.row.cover + $store.state.imgRotate"
            width="55px"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="员工手机号"
        align="center"
        property="phone"
      ></el-table-column>
      <el-table-column
        label="商品佣金"
        align="center"
        property="total_cashmoney"
      ></el-table-column>
      <el-table-column
        label="待结算佣金"
        align="center"
        property="cashmoney"
      ></el-table-column>
      <el-table-column
        label="所属门店"
        align="center"
        property="store"
      ></el-table-column>
      <el-table-column
        label="操作"
        align="center"
        fixed="right"
        width="250"
        class-name="tableoperation"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="msgTag(scope.row)">
            详情
          </el-button>
          <el-button size="mini" type="text" @click="settlementTag(scope.row)">
            结算
          </el-button>
        </template>
      </el-table-column>
    </Main>
    <Footer :total="totals">
      <el-pagination
        :page-size="10"
        layout="prev, pager, next"
        :total="totals"
        @current-change="changes"
      >
      </el-pagination>
    </Footer>

    <msg :visible="visible === 'msg'" :val="Val" @outDialog="outDialog" />
    <settlement
      :visible="visible === 'settlement'"
      :val="Val"
      @outDialog="outDialog"
    />
  </div>
</template>
<script>
import { DISTRIBUTEORDERLIST } from "../../service";

export default {
  components: {
    msg: () => import("../component/msg"),
    settlement: () => import("../component/settlement")
  },
  data() {
    return {
      activeName: "user",
      listData: [],
      searchName: "",
      select: 0,
      options: [
        { label: "员工昵称", value: 0 },
        { label: "员工手机号", value: 1 }
      ],
      totals: 0,
      pages: 0,
      visible: "",
      Val: {}
    };
  },

  created() {
    this.getList();
  },
  methods: {
    outDialog() {
      this.getList();
      this.visible = "";
      this.Val = {};
    },
    msgTag(e) {
      this.visible = "msg";
      this.Val = e;
      this.Val.type = 2;
    },
    settlementTag(e) {
      this.visible = "settlement";
      this.Val = e;
      this.Val.type = 2;
    },
    reset() {
      this.searchName = "";
      this.getList();
    },
    async getList() {
      let param = {
        page: this.pages,
        pageshow: 10,
        type: 2
      };
      if (this.select === 0) {
        param.nick_name = this.searchName;
      } else {
        param.phone = this.searchName;
      }
      await DISTRIBUTEORDERLIST(param).then(({ code, data, msg }) => {
        if (code === 200) {
          this.totals = data.count;
          this.listData = data.list;
        } else {
          this.totals = 0;
          this.listData = [];
          this.$message.error(msg);
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
